<template>
  <div class="DiseaseCodingM">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px':'top: 100px'"
        >
          <div class="top_box">
            <el-input
              size="mini"
              style="display:inline-block;width:20%"
              v-model="input_val"
              placeholder="请输入编号/名称进行模糊搜索"
            ></el-input>
            <el-button
              size="small"
              style="margin-left:15px"
              icon="el-icon-search"
              @click="page.page=1,getTableData()"
            ></el-button>
            <el-button
              size="small"
              style="margin-left:15px"
              icon="el-icon-plus"
              @click="open"
            ></el-button>
            <el-button
              plain
              size="small"
              @click="exportLog"
            >Excel导出</el-button>
            <el-upload
              style="display:inline-block"
              class='ensure ensureButt'
              :limit=limitNum
              :auto-upload="false"
              accept=".xlsx"
              :action="UploadUrl()"
              :before-upload="beforeUploadFile"
              :on-change="fileChange"
              :on-exceed="exceedFile"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :on-error="handleError"
              :file-list="fileList"
            >
              <el-button
                size="small"
                style="margin-left:10px"
                v-loading.fullscreen.lock="fullscreenLoading"
              >Excel导入</el-button>
            </el-upload>
            <el-button
              type="text"
              style="float:right"
              @click="Excel_out"
            >Excel模板</el-button>

          </div>
          <div class="main_box">
            <template>
              <el-table
                :data="tableData"
                style="width: 100%"
                v-loading="table_loading"
                height="600"
              >
                <el-table-column
                  label="序号"
                  type="index"
                  :index='(index)=>{return page.limit*(page.page-1)+index + 1  }'
                >
                </el-table-column>
                <el-table-column
                  prop="OIDCode"
                  label="OID编码"
                >
                </el-table-column>
                <el-table-column
                  prop="OIDName"
                  label="OID名称"
                >
                </el-table-column>
                <el-table-column
                  prop="Code"
                  label="编码"
                >
                </el-table-column>
                <el-table-column
                  prop="Name"
                  label="名称"
                >
                </el-table-column>
                <el-table-column
                  prop="Category"
                  label="手术操作类别"
                >
                </el-table-column>
                <el-table-column
                  prop="InOptions"
                  label="手术操作录入选项"
                >
                </el-table-column>
                <el-table-column
                  prop="Remark"
                  label="备注"
                >
                </el-table-column>
                <el-table-column
                  prop="Version"
                  label="版本号"
                >
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      icon="el-icon-edit"
                      @click="table_items_edit(scope.row)"
                    ></el-button>
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="table_items_del(scope.row)"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <!-- 页码 -->
            <div class="block">
              <el-pagination
                layout="prev, pager, next"
                :total="page.total"
                :page-size="page.limit"
                @current-change="page_change"
                :current-page="page.page"
              >
              </el-pagination>
            </div>
          </div>
          <!-- 弹窗 -->
          <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="45%"
            :before-close="handleClose"
            :append-to-body="true"
            :close-on-click-modal="false"
          >
            <el-form
              label-position="right"
              label-width="120px"
              :model="formLabelAlign"
            >
              <el-form-item
                label="OID编码"
                style="display:inline-block;width:50%"
              >
                <el-input v-model="formLabelAlign.OIDCode"></el-input>
              </el-form-item>
              <el-form-item
                label="OID名称"
                style="display:inline-block;width:50%"
              >
                <el-input v-model="formLabelAlign.OIDName"></el-input>
              </el-form-item>
              <el-form-item
                label="编码"
                style="display:inline-block;width:50%"
              >
                <el-input v-model="formLabelAlign.Code"></el-input>
              </el-form-item>
              <el-form-item
                label="名称"
                style="display:inline-block;width:50%"
              >
                <el-input v-model="formLabelAlign.Name"></el-input>
              </el-form-item>
              <el-form-item
                label="手术操作类别"
                style="display:inline-block;width:50%"
              >
                <el-input v-model="formLabelAlign.Category"></el-input>
              </el-form-item>
              <el-form-item
                label="手术操作录入选项"
                style="display:inline-block;width:50%"
                label-width="130px"
              >
                <el-input v-model="formLabelAlign.InOptions"></el-input>
              </el-form-item>
              <el-form-item
                label="备注"
                style="display:inline-block;width:50%"
              >
                <el-input v-model="formLabelAlign.Remark"></el-input>
              </el-form-item>
              <el-form-item
                label="版本号"
                style="display:inline-block;width:50%"
              >
                <el-input v-model="formLabelAlign.Version"></el-input>
              </el-form-item>
            </el-form>
            <span
              slot="footer"
              class="dialog-footer"
            >
              <el-button @click="handleClose">取 消</el-button>
              <el-button
                type="primary"
                @click="btn_ok"
              >确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { exportExcelMethod } from '@/utils'
export default {
  name: "",
  data () {
    return {
      tableData: [],
      input_val: '',
      page: {
        page: 1,
        limit: 12,
        total: 1
      },
      dialogVisible: false,
      formLabelAlign: {},
      title: '',
      table_loading: false,
      fileList: [],
      limitNum: 1,  // 上传excell时，同时允许上传的最大数
      isInfor: false,
      fullscreenLoading: false

    };
  },
  methods: {
    getTableData () {//获取表单数据
      this.table_loading = true
      this.$post("/ICDManage/List?category=ICD-9-CM-3&keyword=" + this.input_val + "&page=" + this.page.page + "&limit=" + this.page.limit).then(res => {
        if (res.code == 0) {
          console.log(res);
          this.tableData = res.data.list
          this.page.total = res.data.TotalCount
          this.table_loading = false
        } else if (res.code == -1) {
          this.$message.error(res.msg);
          this.table_loading = false
        }
      })
    },
    open () {//开启弹层事件
      this.formLabelAlign.Id ? this.title = '修改' : this.title = '新增'
      this.dialogVisible = true
    },
    handleClose () {//关闭弹层事件
      this.dialogVisible = false
      this.formLabelAlign = {}
    },
    btn_ok () {//弹层确定按钮点击事件
      let url = this.formLabelAlign.Id ? '/ICDManage/Update/ICD9' : '/ICDManage/Create/ICD9'
      let body = this.formLabelAlign
      this.$post(url, body).then(res => {
        if (res.code == 0) {
          this.handleClose()
          this.getTableData()
          this.$message({
            message: '操作成功',
            type: 'success'
          });
        } else if (res.code == -1) {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    table_items_edit (val) {//表格编辑点击事件
      var info = JSON.stringify(val)
      this.formLabelAlign = JSON.parse(info)
      this.open()
    },
    table_items_del (val) {//表格删除点击事件
      let id = val.Id
      this.$confirm("确定删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(_ => {
          this.$post("/ICDManage/Delete/" + id).then(res => {
            if (res.code == 0) {
              this.getTableData()
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
          })

        })
        .catch(_ => { });

    },
    page_change (val) {//页码切换事件
      this.page.page = val
      this.getTableData()
    },
    exportLog () {//导出
      const url = '/ICDManage/Export?category=ICD-9-CM-3'
      const data = this.tableData
      const myObj = {
        method: 'get',
        url: url,
        fileName: '标准ICD9',
        token: this.token,
        data: { data }
      }
      exportExcelMethod(myObj)
    },
    Excel_out () {// excel导出模板
      // const url = 'http://192.168.0.210:8002/TemplateFile/标准ICD-9导入模板.xlsx'
      // const url = 'http://192.168.200.172:8094/TemplateFile/标准ICD-9导入模板.xlsx' // 玉龙
      const url = 'http://192.168.200.172:8094/TemplateFile/标准ICD-9导入模板.xlsx' // 玉龙
      const data = this.tableData
      const myObj = {
        method: 'get',
        url: url,
        fileName: 'ICD_9导入模板',
        token: this.token,
        data: { data }
      }
      exportExcelMethod(myObj)

    },
    // 文件超出个数限制时的钩子
    exceedFile (files, fileList) {
      this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`);
    },
    // 移除前调用
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //移除时调用
    handleRemove (file, fileList) {
      this.fileList = []
      this.fileList.length <= 0 ? this.isInfor = false : this.isInfor = true
    },
    // 文件状态改变时的钩子
    fileChange (file, fileList) {
      this.fullscreenLoading = true;
      console.log(file.raw);
      this.fileList.push(file.raw);
      console.log(this.fileList);
      this.uploadFile()
      // this.isInfor = true
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile (file) {
      console.log('before upload');
      console.log(file);
      let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== 'xlsx') {
        this.$message.warning('只能上传后缀是.xlsx的文件');
      }
      if (size > 10) {
        this.$message.warning('文件大小不得超过10M');
      }
    },
    // 文件上传成功时的钩子
    handleSuccess (res, file, fileList) {
      this.$message.success('文件上传成功');
      this.$refs.upload.clearFiles();
      this.isInfor = false
    },
    // 文件上传失败时的钩子
    handleError (err, file, fileList) {
      this.$message.error('文件上传失败');
    },
    // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
    UploadUrl: function () {
      return ""
    },
    uploadFile () {
      var formFile = new FormData();
      console.log(this.fileList[0]);
      formFile.append("file", this.fileList[0]); //加入文件对象
      var data = formFile;
      $.ajax({
        // url: "http://192.168.0.210:8002/v1/UploadData/Api/PostAttachments?imgType=file",
        // url: "http://192.168.200.172:8094/v1/UploadData/Api/PostAttachments?imgType=file",//玉龙
        url: "http://192.168.200.172:8094/v1/UploadData/Api/PostAttachments?imgType=file",//香格里拉
        data: data,
        type: "POST",
        dataType: "json",
        cache: false,//上传文件无需缓存 
        processData: false,//用于对data参数进行序列化处理 这里必须false
        contentType: false, //必须 
      }).then(res => {
        this.$post("/ICDManage/Import?path=" + res.data.attachUrl + "&category=ICD-9-CM-3").then(res => {
          console.log(res);
          this.fileList = []
          this.$message({
            message: '导入成功',
            type: 'success'
          });
          this.getTableData()
          this.fullscreenLoading = false;
        })
      })

    },

  },
  mounted () {
    // document.getElementById("2").focus();
  },
  created () {
    if (this.$route.query.Token) {
      localStorage.setItem('Token', this.$route.query.Token)
    }
    this.getTableData()
  }
};
</script>
<style lang="scss">
.DiseaseCodingM {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
  .top_box {
    margin: 10px;
  }
  .main_box {
    margin: 10px;
    text-align: center;
  }
  .el-upload__input {
    display: none !important;
    // display: inline-block;
    // margin-left: 10px;
  }
}
</style>
